<template>
	<div class="recommend">
		<div v-if="recommends && recommends.length > 0">
			<div class="list" v-for="(item, index) in recommends" :key="index">
				<img :src="item.headimgurl">
				<div class="con">
					<h3>{{item.nickname}}</h3>
					<p>注册： {{item.create_time | formatDate}}</p>
				</div>
			</div>
		</div>
		<div class="none" v-else>
			<img src="@/assets/kongzhuangtai.png" alt="">
		</div>
	</div>
</template>

<script type="text/javascript">
	import { get_recommend_man } from '@/api/api'
	import { formatDate } from '@/util/date.js'
	export default {
		filters:{
	    formatDate(time){
	      let date = new Date(time*1000);
	      return formatDate(date,'yyyy.MM.dd');
	      //此处formatDate是一个函数，将其封装在common/js/date.js里面，便于全局使用
	    }
		},
	  components: {
	  },
	  data () {
	    return {
	    	tabIndex: 1,
	    	recommends: [],
	    }
	  },
	  created () {
			this.get_recommend_mans()
	  },
	  methods: {
	  	onItemClick (index) {
	  		this.tabIndex = index
	  	},
	  	get_recommend_mans () {
	  		get_recommend_man().then((res) => {
	  			this.recommends = res.data.info
	  		}).catch((err) => {
	  			console.log(err)
	  		})
	  	}
	  }
	}
</script>

<style lang="stylus" scoped>	
.recommend
	background-color #fff
	min-width 100vw
	min-height 100vh
	.none
		img			
			width 15.4rem
			position absolute
			left 50%
			margin-left -7.7rem
			top 50%
			margin-top -9.6rem
	.list
		padding 1.5rem 0
		margin 0 1.5rem
		border-bottom 1px solid #e6e6e6
		display flex
		position relative
		img
			max-width 5rem
			min-width 5rem
			max-height 5rem
			min-height 5rem
			border-radius 50%
			overflow hidden
			display block
			margin-right 1.5rem
		h3
			line-height 1.6rem
			font-size 1.5rem
			color #333
			font-weight 500
			position absolute
			top 2rem
		p
			color #999
			font-size 1.2rem
			line-height 1.6rem
			position absolute
			bottom 2rem
</style>